<template>
	<view class="zone">
		<Header title="镇妖塔" color="#fff" righttext="记录" path="/pages/forest/towerlog"></Header>
		<view class="main">
			<view class="boss">
				<image src="http://img.cpgm.cc/panda/static/zhenyaota/boss.png" mode="widthFix" />
			</view>
			<view class="bottom">
				<view class="title">守塔boss：熊猫大魔王</view>
				<view class="outside">
					<view class="in">
						<view class="numbox">每日限制挑战：<text>{{userinfo.bt_nums}}</text>/30次</view>
						<view class="line"></view>
						<view class="thing">
							<p>可掉落物品：</p>
							<view class="list">
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/daoju/3.png" mode="widthFix" />
									</view>
									<text>北斗七星剑</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/daoju/2.png" mode="widthFix" />
									</view>
									<text>吴越剑</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/daoju/1.png" mode="widthFix" />
									</view>
									<text>孔雀红</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
									</view>
									<text>银元</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
									</view>
									<text>水晶</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/daoju/stone2.png" mode="widthFix" />
									</view>
									<text>激活石</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/daoju/stone1.png" mode="widthFix" />
									</view>
									<text>进阶石</text>
								</view>
								<view class="item" > 
									<view class="imgbox">
										<image src="http://img.cpgm.cc/panda/static/daoju/stone3.png" mode="widthFix" />
									</view>
									<text>挑战石</text>
								</view>
							</view>
						</view>
					</view>

					<view class="btnbox">
						<u-button :plain="true" :hair-line="false" hover-class="none"  :throttle-time="1000" class="button" @click="tower(1)">
							<image src="http://img.cpgm.cc/panda/static/daoju/stone3.png" mode="widthFix" />
							<text>挑战石X1挑战</text>
						</u-button>
						<u-button :plain="true" :hair-line="false" hover-class="none"  :throttle-time="1000"  class="button" @click="tower(2)">
							<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
							<text>银元X2挑战</text>
						</u-button>
					</view>
				</view>
			</view>
		</view>

		<u-mask :show ="show2">
			<view class="warp">
				<image class="closed2" @click="show2 = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/zhenyaota/success.png" mode="widthFix" />
					<image class="guang" src="http://img.cpgm.cc/panda/static/mask/guang.png" mode="widthFix" />
					<h3>恭喜获得以下物品</h3>

					<view class="side">
						<view class="list">
							<view class="item" v-for="item in list" :key="item"> 
								<view class="imgbox">
									<image :src="imgurl + item.img" mode="widthFix" />
								</view>
								<text>{{item.name}}*{{item.num}}</text>
							</view>
						</view>
						<view class="button" @click="show2 = false">开心收下</view>
					</view>
				</view>
			</view>
		</u-mask>



	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				show2:false,
				list:'',
				userinfo: uni.getStorageSync('userinfo'),
			};
		},
		onLoad(){
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					this.userinfo = res.data
				})
			},	
			
			async tower(type){
				let res = await this.$http.index.tower({
					type:type,
				})
				if(res.code == 1) {
					this.list = res.data
					this.show2 = true
					this.getUserInfo();
				}else {
					this.$u.toast(res.msg)
				}
			},
		},
	}
</script>

<style lang="less">
.zone{
	background: url('http://img.cpgm.cc/panda/static/zhenyaota/beij.png');
	background-size: 100% auto;
	min-height: 100vh;
}

.main {
}

.boss {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin-top: 3vh;
}

.bottom {
	background: rgba(0, 0, 0, 0.3);
	padding: 10px;

	.title {
		color: #fff;
		text-align: center;
		font-size: 14px;
	}

	.outside {
		background: rgba(255,255,255,0.7);
		box-shadow: 0px -5px 18px 0px rgba(0,0,0,0.2);
		border-radius: 10px;
		padding: 10px;
		margin-top: 15px;
		
		.in {
			background: rgba(255,255,255,0.8);
			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
			border-radius: 5px;
			padding: 10px;
		}
	}

	.numbox {
		color: #000;
		font-size: 12px;

		text {
			color: #239D4C;
		}
	}

	.line {
		width: 100%;
		height: 1px;
		background: rgba(0, 0, 0, 0.1);
		margin: 10px 0;
	}

	.thing {
		p {
			color: #000000;
			font-size: 11px;
			font-weight: 600;
		}

		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 10px;

			.item {
				width: 18%;
				display: flex;
				flex-direction: column;
				margin: 5px 1% ;
				align-items: center;

				.imgbox {
					width: 100%;
					line-height: 0;
					background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
					border-radius: 4px;

					image {
						width: 100%;
					}
				}
				text {
					font-size: 12px;
					zoom: 0.8;
					margin-top: 2px;
				}
			}
		}
	}

	.btnbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15px;

		.button {
			width: 48%;
			display: flex;
			align-items: center;
			height: 55px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;

			image {
				width: 30px;
				margin-right: 2px;
			}
			text {
				color: #B73800;
				font-size: 16px;
				font-weight: 600;
			}
		}
	}
}







// 购买弹窗

.warp {
	position: relative;
	background: url('http://img.cpgm.cc/panda/static/mask/beij.png'), linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	background-size: 100% auto;
	border-radius: 10px;
	z-index: 9;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		h3 {
			width: fit-content;
			font-size: 18px;
			position: relative;
			z-index: 10;
			line-height: 20px;
			margin-top: 12%;
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.yb {
			width: 45%;
			margin-top: -11%;
		}

		.guang {
			width: 100%;
			position: absolute;
			top: -38%;
			left:0;
			z-index: -1;
		}

		.side {
			background: rgba(255,255,255,0.7);
			border-radius: 9px;
			width: 100%;
			margin-top: 20px;
		}

		.list {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 10px;

			.item {
				width: 21%;
				display: flex;
				flex-direction: column;
				margin: 5px 2% ;
				align-items: center;

				.imgbox {
					width: 90%;
					line-height: 0;
					background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
					border-radius: 4px;

					image {
						width: 100%;
					}
				}
				text {
					font-size: 12px;
					zoom: 0.8;
					margin-top: 4px;
				}
			}
		}
		
	}

	.button {
		margin: 0 auto;
		margin-top: 20px;
		width: 80%;
		height: 55px;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		color: #B73800;
		font-size: 16px;
		font-weight: 600;
	}

	.closed2 {
		position: absolute;
		width: 25px;
		top: 3%;
		right: 15px;
	}
}


</style>
